<template>
  <div class="fodder">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-upload
          ref="upremove"
          class="upload-demo"
          :on-success="handImg"
          :headers="tokens"
          action="/lejuAdmin/material/uploadFileOss"
        >
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">
            只能上传jpg/png文件，且不超过500kb
          </div>
        </el-upload>
      </div>
      <div class="box">
        <div class="xinxi">
          <div v-for="item in list" :key="item.id" class="boxxinxi">
            <div class="title">创建时间：{{ item.createTime }}</div>
            <div class="picImg">
              <img :src="item.ossUrl" alt="">
            </div>
            <div class="butn">
              <div class="datal" @click="datalers(item.id)"><span>删 除</span></div>
            </div>
          </div>
        </div>
      </div>
    </el-card>
    <div class="foot">
      <el-pagination
        :current-page="start"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="limit"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import { findMaterialByPage, delMaterial } from '@/api/Management/fodder/index.js'
import { getToken } from '@/utils/myAuth'
export default {
  name: 'Sucai',
  data() {
    return {
      // 请求页数
      start: 1,
      // 请求条数
      limit: 20,
      // 总条数
      total: 0,
      // 请求到的数据
      list: [],
      // 上传图片
      coverImg: ''
    }
  },
  computed: {
    // 上传图片没有携带本地存储的登录信息，需要手动添加上去

    tokens() {
      return {
        token: getToken()
      }
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      findMaterialByPage(this.start, this.limit).then((res) => {
        // console.log(res)
        this.list = res.data.rows
        this.total = res.data.total
        console.log(this.list)
      })
    },
    // 点击上传图片
    handImg(response, file, fileList) {
      // console.log(response)
      this.coverImg = response.data.fileUrl
      this.$refs.upremove.clearFiles()
      if (response.success) {
        this.$message({
          message: '上传成功',
          type: 'success'
        })
        this.init()
      } else {
        this.$message.error('上传失败')
        this.init()
      }
    },
    // 点击页数发送请求新数据
    handleSizeChange(e) {
      // console.log(e)
      this.start = e
      this.init()
    },
    // 点击条数/页触发请求新数据
    handleCurrentChange(e) {
      // console.log(e)
      this.limit = e
      this.init()
    },
    // 点击删除按钮
    datalers(e) {
      // console.log(e)
      const id = e
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delMaterial(
          id
        ).then(res => {
          // console.log(res)
          // console.log(res.success)
          if (res.success) {
            // this.$message('删除成功');
            this.init()
          } else {
            this.$message('删除失败')
          }
        })
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.fodder {
  .box-card {
    margin: 30px;
    .clearfix {

    }
    .box {
      width: 100%;
      padding: 0px;
      box-sizing: border-box;
      // background-color: #eb2929;
      .xinxi {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        background-color: #fff;
        .boxxinxi {
          width: 19%;
          height: 420px;
          margin: 10px 0;
          padding: 15px;
          box-sizing: border-box;
          display: flex;
          flex-direction: column;
          flex-wrap: nowrap;
          justify-content: space-between;
          align-items: center;

          .title {
            width: 100%;
            height: 15%;
            background-color: #fff;
          }
          .picImg {
            flex: 1;
            height: 70%;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .butn {
            width: 100%;
            height: 15%;
            display: flex;
            justify-content: flex-end;
            align-items: flex-end;
            background-color: #fff;
             .datal {
              width: 50%;
              height: 50%;
              color: #fff;
              cursor:pointer;
              border-radius: 10px;
              display: flex;
              background-color: #da5d5d;
              justify-content: center;
              align-items: center;
            }
          }
        }
      }
    }
  }
    .foot{
      margin: -30px 30px 30px;
      background-color: #fff;
    }
}
</style>
